<template>
	<div id="hot">
		<h3 id="hot-h3">热搜</h3>
		<ul id="hot-ul">
			<li id="hot-li" v-for="(hot,index) in hots" :key="index">
				<a href="#" id="hot-a">{{hot}}</a>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				hots:[
					"小爱","音箱","电脑","酒水","手机","小米","冰箱","手表","耳环","拖鞋","洗衣液","手表","童装","手机壳","手套","口红","保温杯","纸巾","棉拖鞋","卫衣"
				]
			}
		}
	}
</script>

<style scoped>
	#hot{
		width: 100%;
		height: 0.89rem;
		padding: 0 0.08rem;
		box-sizing: border-box;
	}
	#hot-h3{
		width: 3.98rem;
		height: 0.35rem;
		font-size: 0.14rem;
		color: black;
		font-weight: normal;
		padding-top: 0.15rem;
		box-sizing: border-box;
		margin-bottom: 0.1rem;
	}
	#hot-ul{
		width: 3.98rem;
		height: 0.43rem;
		list-style: none;
		display: flex;
		flex-wrap: nowrap;
		overflow: auto;
	}
	#hot-li{
		height: 0.32rem;
		background-color: #e7e7e7;
		display: inline-block;
		line-height: 0.32rem;
		padding: 0 0.1rem;
		box-sizing: border-box;
		border-radius: 0.05rem;
		margin-right: 0.1rem;
		flex-shrink: 0;
	}
	#hot-a{
		text-decoration: none;
		color: #595959;
		font-size: 0.13rem;
	}
</style>
